<template>
	<view class="content">
		<view class="banner"><image mode="widthFix" class="image" :src="require('@/static/images/special/hot-background.jpg')" /></view>
		<ui-tabs ref="tabs" v-model="active" :labels="list" type="swiper" :sticky="true" :sticky-top="0" @tab-change="tabChange">
			<template v-slot:swiper="{ item }">
				<!--渲染商品列表-->
				<div class="goods-list">
					<large-item
						v-for="(goodsItem, goodsIndex) in item.goodsList"
						:key="goodsIndex"
						:goodsIndex="goodsIndex"
						:goodsItem="goodsItem"
						@showCopy="showCopy"
						@showAuthorize="showAuthorize"
					></large-item>

					<!-- 加载中插件 -->
					<load-more :loading="item.loading" :finished="item.finished" :empty="item.empty"></load-more>
				</div>
			</template>
		</ui-tabs>

		<!--复制成功-->
		<prop-box ref="copyDialog" :isBtn="false" :isTitle="false" height="336" width="452" :isClose="true">
			<view class="content-box">
				<image class="icon" model="widthFix" :src="require('@/static/icons/copy.png')" />
				<view class="text">淘口令复制成功</view>
				<view class="text">打开【淘宝】购买吧</view>
			</view>
		</prop-box>

		<!--授权弹窗-->
		<authorize ref="authorize"></authorize>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>
	</view>
</template>

<script>
import Authorize from '@/components/Authorize';
import PropBox from '@/components/PropBox';
import LoadMore from '@/components/LoadMore';
import LargeItem from '@/components/special/LargeItem';
import loader from '@/utils/mixin/loader';
export default {
	name: 'special-hot',
	components: {
		LoadMore,
		LargeItem,
		Authorize,
		PropBox
	},
	mixins: [loader],
	created() {
		this.init();
	},
	methods: {
		init() {
			this.list[0].label = '全部';
			this.$service.shopping.classify.bigCouponClassify().then(res => {
				res = res.map(e => {
					return {
						mainName: e.name,
						id: e.id
					};
				});
				res.forEach(item => {
					item.label = item.mainName;
					item.loading = false;
					item.finished = false;
					item.empty = false;
					item.goodsList = [];
					item.page = 1;
				});
				this.list = this.list.concat(res);
				this.loadMore(this.list[0]);
			});
		},
		beforeLoad(item) {
			this.params.app = 'uniapp';

			if (Number(item.cid) === 0) {
				this.params.floorId = '';
				this.params.order = 'ysqLevel';
				this.params.sort = 'desc';
			} else {
				this.params.floorId = item.id;
				this.params.order = '';
				this.params.sort = '';
			}

			this.service = this.$service.shopping.goods.bigCouponGoods(this.params);
			return true;
		},
		showCopy() {
			this.$refs.copyDialog.open();

			setTimeout(() => {
				this.$refs.copyDialog.close();
			}, 5000);
		},
		showAuthorize() {
			this.$refs.authorize.open();
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #e79bf2;
	min-height: 100vh;
	.banner {
		width: 100%;
		height: 292rpx;
		.image {
			width: 100%;
			height: 100%;
		}
	}
	.goods-list {
		width: 700rpx;
		margin: 0 auto;
		min-height: 500rpx;
		padding-bottom: 30rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
	}
}
.content-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
	}
	.text {
		text-align: center;
		font-size: 28rpx;
		color: #2e2d2d;
	}
}
</style>
